@extends('Admin.layouts.application')
@section('css')

    <link rel="stylesheet" href="/assets/xSystem/vendor/webupload/dist/webuploader.css" />
    <link rel="stylesheet" href="/assets/xSystem/vendor/lightbox/lightbox.css" />
    <link rel="stylesheet" type="text/css" href="/assets/xSystem/vendor/webupload/style.css" />
    <style>
        .fixed-layout .admin-header{
            z-index: 1000;
        }

    </style>
@endsection
@section('content')
  <div class="admin-content">
  <div class="admin-content-body">
    <div class="am-cf am-padding am-padding-bottom-0">
      <div class="am-fl am-cf">
        <strong class="am-text-primary am-text-lg">编辑背景图</strong> /
        <small>Edit background</small>
      </div>
    </div>

    <hr>
    @include('Admin.layouts._flash')
    <form class="am-form" method="post" action="{{route('main.update',$main->id)}}">
      {!! method_field('put') !!}
      {!! csrf_field() !!}
        <div class="am-tabs am-margin" data-am-tabs>
            <ul class="am-tabs-nav am-nav am-nav-tabs">
                <li class="am-active"><a href="#tab1">通用信息</a></li>
                <li><a href="#tab2">主页背景</a></li>
            </ul>
            <div class="am-tabs-bd" style="height: 800px;">
               <div class="am-tab-panel am-fade am-in am-active" id="tab1">
                   <div class="am-g am-margin-top">
                       <div class="am-u-sm-4 am-u-md-2 am-text-right">
                           缩略图
                       </div>

                       <div class="am-u-sm-8 am-u-md-8 am-u-end col-end">
                           <div class="am-form-group am-form-file new_thumb">
                               <button type="button" class="am-btn am-btn-secondary am-btn-sm">
                                   <i class="am-icon-cloud-upload" id="loading"></i> 上传新的缩略图
                               </button>
                               <input type="file" id="thumb_upload" value="{{$main->thumb}}">
                           </div>
                           <input type="hidden" name="thumb" value="{{$main->thumb}}">
                           <hr data-am-widget="divider" style="" class="am-divider am-divider-dashed"/>

                           <div>
                               <img src="{{$main->thumb}}" id="img_show" style="max-height: 200px;">
                           </div>
                       </div>
                   </div>
                    <div class="am-g am-margin-top sort">
                        <div class="am-u-sm-4 am-u-md-2 am-text-right">
                            欢迎词
                        </div>
                        <div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
                            <textarea rows="10" name="salutatory">{{$main->salutatory}}</textarea>
                        </div>
                    </div>
                   <div class="am-g am-margin-top sort">
                       <div class="am-u-sm-4 am-u-md-2 am-text-right">
                           英文欢迎词
                       </div>
                       <div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
                           <textarea rows="10" name="en_salutatory">{{$main->en_salutatory}}</textarea>
                       </div>
                   </div>

                </div>
                <div class="am-tab-panel am-fade am-in am-active" id="tab2">
                    <ul data-am-widget="gallery"
                        class="am-gallery am-avg-sm-2 am-avg-md-4 am-avg-lg-6 am-gallery-imgbordered xGallery"
                        data-am-gallery="{ pureview: true }">

                        @foreach($main->main_galleries as $gallery)
                            <li>
                                <div class="am-gallery-item">
                                    {{--<a href="{{$gallery->img}}" class="">
                                        <img src="{{$gallery->img}}"/>
                                    </a>--}}
                                    <img class="lightbox-image" src="{{$gallery->img}}"/>
                                    <div class="file-panel">
                                        <span class="cancel" data-id="{{$gallery->id}}">删除</span>
                                    </div>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                    <div id="uploader">
                        <div class="queueList">
                            <div id="dndArea" class="placeholder">
                                <div id="filePicker"></div>
                                <p>或将照片拖到这里，单次最多可选300张</p>
                            </div>
                        </div>
                        <div class="statusBar" style="display:none;">
                            <div class="progress">
                                <span class="text">0%</span>
                                <span class="percentage"></span>
                            </div>
                            <div class="info"></div>
                            <div class="btns">
                                <div id="filePicker2"></div>
                                <div class="uploadBtn">开始上传</div>
                            </div>
                        </div>
                        <div id="imgs"></div>
                    </div>
                </div>
        </div>
        <div class="am-margin">
          <button type="submit" class="am-btn am-btn-primary am-btn-xs">提交保存</button>
          <a href="javascript:history.go(-1);" class="am-btn am-btn-primary am-btn-xs">放弃保存</a>
        </div>
    </form>
  </div>

 @include('Admin.layouts._footer')
</div>
@endsection

@section('js')
    <script src="/assets/xSystem/js/jquery.html5-fileupload.js"></script>
    <script src="/assets/xSystem/js/upload.js"></script>
    <script src="/assets/xSystem/vendor/ckfinder/ckfinder.js"></script>
    <script src="/assets/xSystem/js/ck_upload.js"></script>
    <script src="/assets/xSystem/vendor/lightbox/lightbox.js"></script>

    <script type="text/javascript" src="/assets/xSystem/vendor/webupload/dist/webuploader.js"></script>
    <script type="text/javascript" src="/assets/xSystem/vendor/webupload/upload.js"></script>
    <script>
        $(function () {
            $(".am-gallery-item").hover(function () {
                $(this).children('.file-panel').fadeIn(300);
            }, function () {
                $(this).children('.file-panel').fadeOut(300);
            });

            /*$(".lightbox-image").each(function (i, img) {
                var parentNode = img.parentNode;
                if (parentNode.tagName == "A") return;

                $(img).wrap('<a href="' + ($(img).attr("src2") || $(img).attr("src")) + '" data-lightbox="lightbox-image"></a>');
            });*/


            $(".cancel").click(function () {

                var _this = $(this);
                $.ajax({
                    type: "delete",
                    url: "/main/destroy_gallery",
                    data: {gallery_id: _this.data('id')},
                    success: function () {
                        _this.parents("li").remove();
                    }
                });
            });
        })
    </script>
@endsection
